<template>
    <a-modal
        v-model:visible="showModal"
        :title="title"
        :width="500"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-timeline>
            <a-timeline-item color="red">
                <template #dot><span class="importIcon">1</span></template>
                <div class="importTitle">下载表格模板</div>
                <div class="importDesc">
                    请下载模板后，按照模板格式要求编辑后上传，完成上次。
                    <span class="importText"><DownloadOutlined />下载模板</span>
                </div>
            </a-timeline-item>
            <a-timeline-item color="red">
                <template #dot><span class="importIcon">2</span></template>
                <div class="importUpload">
                    <a-upload-dragger
                        v-model:fileList="fileList"
                        name="file"
                        accept=".xlsx"
                        :multiple="true"
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        @change="handleChange"
                    >
                        <p class="ant-upload-text">当前仅支持.xlsx文件</p>
                        <a-button>上传文件</a-button>
                    </a-upload-dragger>
                </div>
            </a-timeline-item>
        </a-timeline>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, onMounted } from 'vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';

import { getIndustry } from '@/api/merchant';

export default defineComponent({
    name: 'roleModel',
    components: { DownloadOutlined },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },

        title: {
            type: String,
        },
        loading: {
            type: Boolean,
            default: () => false,
        },
        dept: {
            type: Object,
        },
        CountryData: {
            type: Object,
        },
        countryRegionList: {
            type: Array,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        console.log(props);
        const showModal = computed(() => props.visible);
        // const country = computed(() => props.selectCountry as NormalObj[]);
        const industryList = ref<any>([]);
        const countryRegionList = ref<any>([]);

        onMounted(() => {});

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        const onSubmit = () => {
            console.log('dfdfdf');
            return emit('submit');
        };

        return {
            industryList,
            showModal,
            t,
            handleCancle,
            onSubmit,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
.importIcon {
    display: block;
    border: 1px solid #ff6702;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 20px;
    color: #ff6702;
    border-radius: 100%;
}
.importTitle {
    margin: 10px;
}
.importDesc {
    background: #eeeeee;
    padding: 15px;
    border-radius: 5px;
    margin: 10px;
    .importText {
        color: #ff6702;
        .anticon {
            font-size: 18px;
        }
    }
}
.importUpload {
    margin: 10px;
}
</style>
